<template>
  <div class="message-sending-box">
    <n-input
      @keydown.enter="send"
      v-model:value="text"
      type="textarea"
      :placeholder="`给@${'????'}发送信息`"
      :autosize="{
        minRows: 1,
      }" />
    <el-image src="/src/assets/icon/xiaoxi.png"></el-image>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { ChatTargetIdentifier } from "@/api/models/ChatMessageAddRequest.ts";
import wsSocket from "@/plugins/ws-socket.ts";
import { usePrivateMessageStore } from "@/store";

const text = ref("");

function send(event: KeyboardEvent) {
  event.preventDefault();
  let message = {
    targetId: usePrivateMessageStore().selectedItem.privateId,
    content: text.value,
    targetIdentifier: ChatTargetIdentifier.PRIVATE_MESSAGE,
  };
  wsSocket?.send(message);
  text.value = "";
}
</script>

<style scoped>
.message-sending-box {
  width: 100%;
  min-height: 80px;
  max-height: 160px;
  display: flex;
  padding: 10px 15px;

  /*定位*/
  position: relative;
}

.n-input {
  /*圓邊*/
  border-radius: 12px;
  border: none;
  padding: 10px 40px;
  font-size: 16px;
}

.el-image {
  position: absolute;
  width: 35px;
  bottom: 24px;
  left: 25px;
  /*水平翻转*/
  transform: rotateY(180deg);
}
</style>
